<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body>
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>注册</legend>
</fieldset>
<div><span id="msg"> 请注册</span></div>
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">居住地</label>
        <div class="layui-input-block">
            <select name="city" lay-filter="aihao">
                <option value=""></option>
                <option value="0">西安</option>
                <option value="1">三亚</option>
                <option value="2">库尔勒</option>
                <option value="3">成都</option>
                <option value="4">昆明</option>
            </select>
        </div>
    </div>

    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">偏好</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="checkbox" name="like[write]" title="写作">-->
            <!--<input type="checkbox" name="like[read]" title="阅读">-->
            <!--<input type="checkbox" name="like[daze]" title="发呆">-->
        <!--</div>-->
    <!--</div>-->

    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">个人简介</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
        </div>
    </div>
</form>

<script src="../static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            $ = layui.jquery
        //     ,layer = layui.layer
        //     ,layedit = layui.layedit
        //     ,laydate = layui.laydate;
        //
        // //日期
        // laydate.render({
        //     elem: '#date'
        // });
        // laydate.render({
        //     elem: '#date1'
        // });

        //创建一个编辑器
        // var editIndex = layedit.build('LAY_demo_editor');
        //
        // //自定义验证规则
        // form.verify({
        //     title: function(value){
        //         if(value.length < 5){
        //             return '标题至少得5个字符啊';
        //         }
        //     }
        //     ,pass: [
        //         /^[\S]{6,12}$/
        //         ,'密码必须6到12位，且不能出现空格'
        //     ]
        //     ,content: function(value){
        //         layedit.sync(editIndex);
        //     }
        // });

        //监听指定开关
        form.on('switch(switchTest)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url:"/register",
                data:data.field,
                dataType:"json",
                type:"POST",
                success:function (d) {
                    document.getElementById("msg").innerText=d.msg
                    window.location.href="/test"
                }
            })
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return false;
        });

        // //表单赋值
        // layui.$('#LAY-component-form-setval').on('click', function(){
        //     form.val('example', {
        //         "username": "贤心" // "name": "value"
        //         ,"password": "123456"
        //         ,"interest": 1
        //         ,"like[write]": true //复选框选中状态
        //         ,"close": true //开关状态
        //         ,"sex": "女"
        //         ,"desc": "我爱 layui"
        //     });
        // });

        //表单取值
        // layui.$('#LAY-component-form-getval').on('click', function(){
        //     var data = form.val('example');
        //     alert(JSON.stringify(data));
        // });

    });
</script>
</body>
</html>